<template>
  <div class="content">
    <div class="title">
      <p>我的收藏</p>
    </div>
    <div class="contTop">
      <el-menu
        :default-active="defaultActive"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#626262"
        active-text-color="#1289FF"
        router
      >
        <el-menu-item index="/mall/profile/myFavorite/doteyCollect">
          宝贝收藏
          <!-- <span>|</span> -->
        </el-menu-item>
        <el-menu-item index="/mall/profile/myFavorite/shopCollect">
          店铺收藏
          <!-- <span>|</span> -->
        </el-menu-item>
      </el-menu>
      <div class="line"></div>
    </div>
    <div class="viewContent">
      <router-view></router-view>

    </div>
  </div>
</template>

<script>
export default {
  name:"myFavorite",
  data() {
    return {
      defaultActive: "",
    };
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      this.defaultActive = to.path;
    },
  },
  created() {
    // 获取当前路径
    this.defaultActive = this.$route.path;
    // 第一次加载的时候重定向到个人资料页面
    if (this.$route.path === "/mall/profile/myFavorite/") {
      this.$router.push({ path: "/mall/profile/myFavorite/doteyCollect" });
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  background: #fff;
  height: 1041px;
  .contTop{
    margin-left: 10px;
  }
}
.title {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  background: #fff;
  height: 62px;
  line-height: 62px;
  border-bottom: 1px solid #e9e9e9;
  font-family: "Source Han Sans CN Bold";
  font-weight: 700;
  font-size: 20px;
  text-align: left;
  color: #3c3c3c;

  p {
    margin-left: 24px;
  }
}

.viewContent {
  width: 1010px;
  // height: 1041px;
  // background: red;
  border-radius: 4px;
}
.el-menu.el-menu--horizontal{
  border-bottom: 1px solid #cccccc !important;
}
.el-menu-item:nth-child(1){
  font-size: 18px;
 
}
.el-menu-item:nth-child(2){
  font-size: 18px;
  margin-left: 20px;
}
</style>
